<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">



  <style>
    @property --_x {
      syntax: "<length>";
      inherits: true;
      initial-value: 0px;
    }

    figure {
      --w: 280px;
      /* image width */
      --r: .5em;
      /* radius */

      display: grid;
      place-items: end end;
      font: bold 40px/1.5 monospace;
      transition: --_x .5s;
      cursor: pointer;
      margin: 0;
    }

    figure.alt {
      place-items: end start;
    }

    figure>* {
      grid-area: 1/1;
    }

    figure:hover {
      --_x: calc(var(--w) - 3*var(--r) - .5lh);
    }

    figure img {
      width: var(--w);
      aspect-ratio: 1;
      border-radius: var(--r);
      --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 69%, #0000 72%);
      --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
      --_d: (.5lh + var(--r));
      mask:
        calc(100% - var(--_d) - var(--_x)) 100% var(--_m),
        100% calc(100% - var(--_d)) var(--_m),
        radial-gradient(.5lh at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--_x)) calc(-1*var(--r)),
        var(--_g) calc(-1*var(--_d) - var(--_x)) 0,
        var(--_g) 0 calc(-1*var(--_d));
      mask-repeat: no-repeat;
    }

    figure.alt img {
      --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
      mask:
        calc(var(--_d) + var(--_x)) 100% var(--_m),
        0% calc(100% - var(--_d)) var(--_m),
        radial-gradient(.5lh at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--_x)) calc(-1*var(--r)),
        var(--_g) calc(var(--_d) + var(--_x)) 0,
        var(--_g) 0 calc(-1*var(--_d));
      mask-repeat: no-repeat;
    }

    figure figcaption {
      height: 1lh;
      width: calc(1lh + var(--_x));
      box-sizing: border-box;
      translate: calc(.5lh - var(--r)) calc(.5lh - var(--r));
      overflow: hidden;
      background: #BF4D28;
      color: #fff;
      border-inline: calc(.5lh - .5ch) solid #0000;
      clip-path: inset(5px round 1lh);
      text-align: center;
      letter-spacing: 1px;
    }

    figure.alt figcaption {
      translate: calc(-.5lh + var(--r)) calc(.5lh - var(--r));
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-content: center;
      grid-auto-flow: column;
      gap: 30px;
      background: linear-gradient(135deg in hsl, #D1F2A5, #F56991)
    }
  </style>




</head>

<body translate="no">
  <figure class="alt">
    <img
      src="https://repo.bfw.wiki/random/300x300/景色"
      alt="Tiger"
    >
    <figcaption>Tiger</figcaption>
  </figure>
  <figure>
    <img
      src="https://repo.bfw.wiki/random/300x300/景色"
      alt="Tiger"
    >
    <figcaption>Wolf</figcaption>
  </figure>


</body>

</html>